<!--  -->
<template>
  <div class="ProductBrand">
    <div class="project-left">
      <!-- 搜索查询开始 -->
      <div class="project-search">
        <div class="search-box">
          <div class="search-top">
            <div class="huntSearch">
              <i class="el-icon-search hunt"></i>
              <span>筛选搜索</span>
            </div>
            <div class="search-btn">
              <el-button type="primary" class="result">查询结果</el-button>
            </div>
          </div>
          <div class="factor">
            <form action class="form-box">
              <div class="factor-list">
                <label for="search">输入搜索：</label>
                <input type="text" placeholder="品牌名称/关键字" id="search" class="inp" />
              </div>
            </form>
          </div>
        </div>
      </div>
      <!-- 搜索查询结束 -->
      <!-- 添加开始 -->
      <Addcommom></Addcommom>
      <!-- 添加结束 -->
      <!-- 商品列表开始 -->
      <div class="projeci-list">
        <el-table
          ref="multipleTable"
          :data="typeList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="selection" width="60" align="center"></el-table-column>
          <el-table-column label="编号" width="80" align="center">
            <template slot-scope="scope">{{scope.row._id}}</template>
          </el-table-column>
          <el-table-column prop="name" label="品牌名称" align="center">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column prop="proName" label="品牌首字母" width="100" align="center">
            <!-- <template slot-scope="scope">{{scope.row.numbers}}</template> -->
            H
          </el-table-column>
          <el-table-column prop="price" label="排序" width="100" align="center">
            <template slot-scope="scope">{{scope.row.__v}}</template>
          </el-table-column>
          <el-table-column prop label="品牌制造商" width="100" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.recommend"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop label="是否显示" width="100" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.showout"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop label="相关" width="200" align="center">
            <template slot-scope="scope">
              <span>商品：<a class="col">{{scope.row.price}}</a></span>&nbsp;
              <span>评价：<a class="col">{{scope.row.numbers}}</a></span>
            </template>
          </el-table-column>
          <el-table-column prop label="操作" width="200" align="center">
            <el-row class="set-btn-box">
              <el-button class="set-btn operation-btn">编辑</el-button>
              <el-button class="set-btn operation-btn" type="danger">删除</el-button>
            </el-row>
          </el-table-column>
        </el-table>
      </div>
      <!-- 商品列表结束 -->
      <!-- 搜索分页开始 -->
      <div class="paginate">
        <template class="paginate">
          <div class="product-botton-right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10,20,30,40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="typeList.length"
            ></el-pagination>
          </div>
        </template>
      </div>
      <!-- 搜索分页结束 -->
    </div>
  </div>
</template>

<script>
import Addcommom from "./commom/Addcommom";
import axios from "axios";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Addcommom,
  },
  data() {
    //这里存放数据
    return {
      typeList: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      /* ------------- */
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /* -------------------------------------分页器 -------------------------------------------------------*/
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    //复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    axios
      .post("http://49.233.65.169:3000/api/goodslist", {
        pageSize: 100,
        pageNum: 1,
      })
      .then((res) => {
        this.typeList = res.data;
      });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.ProductBrand {
  .project-left {
    width: 100%;
    padding: 20px;
    width: 100%;
    padding: 20px;
    .project-search {
      width: 100%;
      padding: 20px;
      border: 1px solid #ebeef5;
      .search-box {
        width: 100%;
        height: 100%;
        .search-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          .huntSearch {
            display: flex;
            align-items: baseline;
            .hunt {
              display: block;
              width: 16px;
              height: 16px;
            }
            span {
              font-size: 16px;
            }
          }
          .search-btn {
            .result {
              padding: 0;
              width: 80px;
              height: 32px;
              color: #fff;
              border: none;
              background-color: transparent;
              outline: none;
              background: #409eff;
              border-radius: 3px;
              font-size: 12px;
            }
          }
        }
        .factor {
          .form-box {
            display: flex;
            flex-wrap: wrap;
            .factor-list {
              width: 343px;
              height: 32px;
              margin: 0 10px 18px 0;
              display: flex;
              label {
                display: block;
                width: 140px;
                height: 100%;
                text-align: right;
                line-height: 32px;
                margin-right: 12px;
              }

              .inp {
                width: 230px;
                height: 100%;
                padding: 0 15px;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                outline: none;
              }
              .inp:focus {
                border: #b0d8ff 1px solid;
              }
              .inp::placeholder {
                color: #c9c9c9;
              }
            }
          }
        }
      }
    }
    .projeci-list {
      margin-top: 20px;
      .set-btn-box {
        display: flex;
        justify-content: space-between;
        .set-btn {
          width: 80px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          padding: 0;
          font-size: 12px;
        }
        .operation-btn {
          width: 60px;
        }
      }
      .col{
        color: #00a2ff;
      }
    }
    .paginate{
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      .product-botton-right{

      }
    }
  }
}
</style>